/*
 * @Author: jiu yin
 * @Date: 2024-05-09 17:58:28
 * @LastEditTime: 2024-06-19 20:39:06
 * @LastEditors: jiu yin zhen jing
 * @FilePath: \studio-web-admin\src\view\pico\component\EditModal.tsx
 * jiu
 */
import { useRef } from "react";

import { edit_device_info } from "@/api/home";
import pico from "@/assets/image/pico.png";
import Modal_edit from "@/comment/modal_edit";
import User_avatar from "@/comment/user_avatar";
import { Input, message } from "antd";

export default function EditModal(props: any) {
	let { isModalOpen, detail } = props;
	let inputRef = useRef<any>("");
	const handleOk = async () => {
		if (inputRef.current === "") return message.warning("设备名称不能为空");
		console.log(inputRef.current);
		await edit_device_info({ device_name: inputRef.current, device_sn: detail.device_sn });
		message.success("修改成功");
		isModalOpen[1](false);
		props.reload();
	};

	return (
		<Modal_edit title="编辑设备信息" width={600} isModalOpen={isModalOpen} handleOk={handleOk}>
			<div className="mt-50px ">
				<section>
					<h3 className="mb-15px">设备型号/SN</h3>
					<div className="flex">
						<img src={pico} alt="" className="w-72px h-72px mr-10px" />
						<div>
							<p className="c-#5B5B5B text-12px ml-10px">SN：{detail.device_real_sn}</p>
							<p className="c-#5B5B5B text-12px ml-10px">设备名称：{detail.device_name}</p>
						</div>
					</div>
				</section>

				<section className="mt-20px">
					<h3 className="mb-15px">设备名称</h3>
					<div className="ml-82px">
						<Input
							style={{ width: 200, height: 35, color: "#1677ff" }}
							placeholder="编辑设备名称"
							allowClear
							onChange={e => (inputRef.current = e.target.value)}></Input>
					</div>
				</section>

				<section className="mt-20px">
					<h3 className="mb-15px">托管</h3>
					<div className=" ml-10px">
						{detail.host_status == 1 && <p>待托管</p>}

						{detail.host_status == 2 && <p>自有</p>}

						{detail.host_status == 3 && (
							<User_avatar
								options={{
									avatar_url: detail.avatar_url,
									nickname: detail.nickname,
									// sex: 1,
									id: detail.user_id,
									color: "#A6A6A6",
								}}
							/>
						)}
					</div>
				</section>
			</div>
		</Modal_edit>
	);
}
